<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100%;
        background-color: #000;
        overflow: hidden;
      }
      .pointer {
        width: 0px;
        height: 0px;
        border: 1px solid #fff;
        position: absolute;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: loop 0.3s;
      }
      @keyframes loop {
        0% {
          width: 0;
          height: 0;
          opacity: 1;
        }
        100% {
          width: 50px;
          height: 50px;
          opacity: 0.5;
        }
      }
      .ball {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        margin-left: -50px;
        margin-top: -50px;
        /* animation: spread 0.5s forwards; */
        /* animation-fill-mode: forwards; */
      }

      @keyframes bling {
        0% {
          opacity: 1;
        }
        70% {
          opacity: 0.1;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="ball"></div>
    <script>
      window.addEventListener("click", (e) => {
        const pointer = document.createElement("div");
        pointer.classList.add("pointer");
        pointer.style.left = e.clientX + "px";
        pointer.style.top = e.clientY + "px";
        document.body.append(pointer);
        pointer.addEventListener("animationend", () => {
          pointer.remove();
        });
        move(e.clientX, e.clientY);
      });

      const ball = document.querySelector(".ball");
      function init() {
        const x = window.innerWidth / 2;
        const y = window.innerHeight / 2;
        ball.style.transform = `translate(${x}px,${y}px)`;
      }
      init();

      function move(x, y) {
        const ballRect = ball.getBoundingClientRect();
        const initX = ballRect.left + ballRect.width / 2;
        const initY = ballRect.top + ballRect.height / 2;
        const rad = Math.atan2(y - initY, x - initX);
        const deg = (rad * 180) / Math.PI;
        ball.getAnimations().forEach((item) => {
          item.cancel();
        });

        const eni=ball.animate(
          [
            {
              transform: `translate(${initX}px,${initY}px) rotate(${deg}deg)`,
              easing: "ease-out",
            },
            {
              transform: `translate(${initX}px,${initY}px) rotate(${deg}deg) scaleX(1.6)`,
              offset: 0.6,
            },
            {
              transform: `translate(${x}px,${y}px) rotate(${deg}deg) scaleX(1.6)`,
              offset: 0.8,
              easing: "ease-in",
            },
            {
              transform: `translate(${x}px,${y}px) rotate(${deg}deg)`,
            },
          ],
          {
            duration: 500,
            fill: "forwards",
          }
        );

      }
    </script>
  </body>
</html>
